//table组件
Vue.component('qqfTable',{
    props:{
        columns:{
            type:Array,
            require:true,
        },
        data:{
            type:Array,
            require:true,
        }
    },
    template:`    <table border="1" cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th v-for="thItem in columns">{{thItem.title}}</th>

        </tr>
    </thead>
    <tbody>
        <tr v-for="trItem in data">
        <!--
            <td>{{trItem.id}}</td>
            <td>{{trItem.title}}</td>
            <td>{{trItem.price}}</td>
            -->


            <td v-for="thItem in columns">
            <!--
            {{trItem[thItem.key]}}
            -->

                <template v-if="thItem.render">
                <span v-html="thItem.render(trItem)"></span>
                </template>
                <template v-else="thItem.render">
                {{trItem[thItem.key]}}
                </template>

            </td>

        </tr>

    </tbody>
</table>
`
})
//分页组件
Vue.component('uiPage', {
    props: {
        total: {
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 3,
        }
    },
    data() {
        return {
            totalPage: 0
        }
    },
    watch: {
        total:{
            handler(newdata) {
                console.log(newdata);
                this.totalPage = Math.ceil(this.total/this.pageSize)
            },
            immediate: true,
        }
    },
    template:`<div class="ui-page">
        <span v-for="num in totalPage" @click="$emit('click-page', num)">{{num}}</span>
    </div>`
})




//dialog组件
Vue.component('uiDialog', {
    props: {
        title: {
            type: String,
            default: '默认标题'
        },
        content: String,
        visible: {
            type: Boolean,
            default: false,
        }
    },
    template:  `<div class = "ui-dialog" v-if="visible">
    <div class= "box">
    <div class = "header">{{title}}</div>
    <div class = "main">
    {{content}}
    </div>
    <div class = "footer">
    <button @click="$emit('close', false)">取消</button>
    <button>确定</button>
    </div>
    </div>
    </div>`
})




//loading(全局)
Vue.component('quanLoading' , {
    props: {
        state: {
            type: Boolean,
            default: false,
        }
    },
    template: `<div class="quan-loading" v-if="state" @click="$emit('close')">
    <span>loading...</span>
    </div>`
})



//loading组件
Vue.component('uiLoading2', {
        props: {
            state: {
                type: Boolean,
                default: true,
            }
        },

    template: `<div class="ui-loading2" v-if="state">
    <span></span>
</div>`,
})




//按钮组件
Vue.component('uiButton', {
    props: {
        content: {
            type: String,
            required: true,
        },
        type: { 
            type: String,
            default: 'primary'
        }
    },
    template: `<button :class="['ui-button', 'ui-button--'+type, 'ui-button--normal']  ">
        <div class="ui-button__content">
        <span class="ui-button__text">{{content}}</span>
        </div>
    </button>` 
})


//导航栏组件
Vue.component('uiNavBar', {
    props: {
        title: {
            type: String,
            required: true,
        },
        leftArrow: Boolean,
    },

    template: `<div class="ui-nav-bar"><span @click="$emit('click-left')">{{leftArrow?'⬅️返回' : ' '}}</span><span>{{title}}</span><span @click="$emit('click-right')">🔎</span></div>`
})


//表单组件
Vue.component('uiTable', {
    props: {
        state: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            formData: {
                account: '',
                password: '',
            }
            
        }
    },
    template: `<fieldset>
    <legend>渔歌封装的表单</legend>
    <!--
    用户名：<input type="text" v-model="account"/>
    密码：<input type="password" v-model="password"/>
    <button @click="$emit('submit', account, password)">提交</button>
    -->
    用户名：<input type="text" v-model="formData.account"/>
    密码：<input type="password" v-model="formData.password"/>
    <button v-if="state" @click="$emit('submit', formData)">提交</button>
    </fieldset>`
})